import React, { useState, useEffect } from 'react';
import LanguageSelector from '@/components/LanguageSelector';
import { useTranslation } from 'react-i18next';
import { frontendVersionManager } from '@/utils/version-manager'; // 版本管理器
import { getDynamicFonts } from '@/utils/fontUtils';
import discord from '@/assets/images/Social.png';
import Visa from '@/assets/images/Visa.png';
import wsd from '@/assets/images/wsd.png';

const Footer: React.FC = () => {
  const { t, i18n } = useTranslation();

  // 根据当前语言动态获取字体
  const dynamicFonts = getDynamicFonts(i18n);
  const [isMobile, setIsMobile] = useState(false);
  const [isTablet, setIsTablet] = useState(false);
  const [isSmallDesktop, setIsSmallDesktop] = useState(false);
  const [isLessThan1070, setIsLessThan1070] = useState(false);
  const [isLessThan1024, setIsLessThan1024] = useState(false);
  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth <= 768);
      setIsTablet(window.innerWidth > 768 && window.innerWidth <= 1024);
      setIsSmallDesktop(window.innerWidth > 1024 && window.innerWidth < 1440);
      setIsLessThan1024(window.innerWidth < 1440);
      setIsLessThan1070(window.innerWidth < 1140);
    };
    if (typeof window !== 'undefined') {
      handleResize();
      window.addEventListener('resize', handleResize);
    }
    return () => {
      if (typeof window !== 'undefined') {
        window.removeEventListener('resize', handleResize);
      }
    };
  }, []);

  const getContentWidth = () => {
    if (isMobile) return 'w-full';
    if (isTablet) return 'w-[90%]';
    if (isSmallDesktop) return 'w-[90%]';
    return 'w-[78%]';
  };
  const getGapSize = () => {
    if (isMobile) return 'gap-[10px]';
    if (isTablet) return 'gap-[20px]';
    if (isSmallDesktop) return 'gap-[40px]';
    return 'gap-[86px]';
  };
  return (
    <div className="w-full" style={{ fontFamily: dynamicFonts.font3, background: 'linear-gradient(90deg, #30181e 0%, #1f1f1f 35%, #1f1f1f 65%, #30181d 100%)' }}>
      <footer
        className={`w-full flex flex-1 flex-col-reverse lg:flex-row ${getGapSize()} mx-auto lg:px-5 md:px-10 text-white py-6 px-2 sm:py-10 sm:px-5 ${isMobile ? 'text-base' : ''}`}
      >
        {/* 内容盒子  */}
        <div
          style={{ display: isLessThan1070 ? 'block' : 'flex', margin: 'auto' }}
          className={`${getContentWidth()} mx-auto ${isMobile ? 'mt-2' : 'mt-20'} px-4`}
        >
          {/* 右侧 */}
          <div
            style={{ order: isMobile ? 1 : 2 }}
            className={`${isMobile ? 'flex flex-col gap-8' : 'flex'} flex-col sm:flex-row lg:w-full justify-between lg:flex-nowrap flex-wrap w-full gap-4 sm:gap-0`}
          >
            {/* 第一行：功能和热门 */}
            <div className="flex w-full gap-4 sm:gap-10 lg:gap-20">
              {/* 功能列  */}
              <div className="flex-1 flex flex-col min-w-0 text-start gap-3 sm:gap-5">
                <div style={{ color: "rgb(164,164,164)", fontFamily: dynamicFonts.font2 }} className="text-grey-default text-xs sm:text-sm block">{t('footer.features')}</div>
                <a className="cursor-pointer whitespace-nowrap text-white text-xs sm:text-sm font-medium hover:text-white" href="/collections">{t('footer.generateImage')}</a>
                <a className="cursor-pointer text-white text-xs sm:text-sm font-medium hover:text-white" href="/ai-anime/nari-yoo">{t('footer.discuss')}</a>
                <a className="cursor-pointer whitespace-nowrap text-white text-xs sm:text-sm font-medium hover:text-white" href="/characters/new">{t('footer.createCharacter')}</a>
                <a className="cursor-pointer text-white text-xs sm:text-sm font-medium hover:text-white" href="/collection">{t('footer.gallery')}</a>
                <a className="cursor-pointer text-white text-xs sm:text-sm font-medium hover:text-white" href="/characters">{t('footer.myAi')}</a>
              </div>
              {/* 热门列  */}
              <div className="flex-1 flex flex-col min-w-0 text-start gap-3 sm:gap-5 lg:pl-2">
                <div style={{ color: "rgb(164,164,164)", fontFamily: dynamicFonts.font2 }} className="text-grey-default text-xs sm:text-sm block">{t('footer.trending')}</div>
                <a className="cursor-pointer whitespace-nowrap text-white text-xs sm:text-sm font-medium hover:text-white" href="https://Know1.ai/">Know1.ai</a>
                <a className="cursor-pointer whitespace-nowrap text-white text-xs sm:text-sm font-medium hover:text-white" href="https://Know1.ai/ai-girlfriend">{t('footer.aiGirlfriend')}</a>
                <a className="cursor-pointer whitespace-nowrap text-white text-xs sm:text-sm font-medium hover:text-white" href="https://Know1.ai/ai-anime">{t('footer.aiAnime')}</a>
                <a className="cursor-pointer whitespace-nowrap text-white text-xs sm:text-sm font-medium hover:text-white" href="https://Know1.ai/ai-boyfriend">{t('footer.aiBoyfriend')}</a>
                {/* Social */}
                {/* <div style={{ color: "rgb(164,164,164)", fontFamily: dynamicFonts.font2 }} className="text-grey-default text-xs sm:text-sm block">
                SNS
                  <img className='w-6 h-6 mt-2' src={discord}></img>
                </div> */}
              </div>
            </div>

            {/* 第二行：法律信息 */}
            <div style={{ position: "relative" }} className="flex flex-col min-w-0 text-start gap-3 sm:gap-2">
              <div style={{ color: "rgb(164,164,164)", fontFamily: dynamicFonts.font2 }} className="text-grey-default text-xs sm:text-sm block">{t('footer.legal')}</div>
              <a className="cursor-pointer text-white text-xs sm:text-sm font-medium whitespace-nowrap hover:text-white" href="/legal-information">{t('footer.terms')}</a>
              {/* 卡片列表 */}
              <div style={{ bottom: "1px", position: isLessThan1024 ? "relative" : "absolute", top: isLessThan1024 ? "1rem" : "12rem" }} className="text-grey-default text-xs sm:text-sm block">
                <div className='flex flex-row gap-2'>
                  {/* Visa卡片  */}
                  <div style={{ minWidth: "80px" }} className='w-20 h-[3rem] flex justify-center items-center bg-white rounded-[5px] p-2'>
                    <img className='w-[3.5rem] h-[1.2rem] ' src={Visa}></img>
                  </div>
                  {/* 万事达卡片  */}
                  <div style={{ minWidth: "80px" }} className='w-20 h-12 flex justify-center items-center bg-white rounded-[5px] p-2'>
                    <img className='w-[3.5rem] h-[3.5rem] ' src={wsd}></img>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* 左侧 */}
          <div
            style={{ order: isMobile ? 2 : 1, marginTop: isLessThan1070 ? "2rem" : "" }}
            className="flex lg:max-w-[427px] w-full mr-4"
          >
            <div className="flex flex-col lg:flex-1 lg:gap-7 w-full gap-6 md:mb-0 mb-4">
              <div className="flex lg:flex-none flex-1">
                <div className="flex flex-col lg:items-start items-center gap-4 flex-1">
                  <div className="flex justify-between w-full items-center">
                    {/* logo 部分 */}
                    <div className="font-logoFont">
                      <span
                        className="text-white text-3xl"
                        style={{
                          textShadow: '1px 1px 0 #111,2px 2px 0 #222,3px 3px 0 #333,4px 4px 6px rgba(0,0,0,0.6)',
                        }}>Know</span>
                      <span
                        className="text-pink-500 text-4xl"
                        style={{
                          textShadow: '1px 1px 0 #881337,2px 2px 0 #701a29,3px 3px 0 #500f1c,4px 4px 6px rgba(0,0,0,0.6)',
                          fontStyle: 'italic',
                          fontWeight: 600,
                          marginLeft: '0.3rem'
                        }}
                      >
                        1
                      </span>
                    </div>
                    {/* 语言选择器  */}
                    <div
                      style={{ border: '1px solid #E1E1E1', fontSize: "0.7rem", cursor: 'pointer' }}
                      className="h-[2rem] flex justify-left items-center mr-6 px-3 rounded-xl"
                    >
                      <LanguageSelector />
                    </div>
                  </div>
                  {/* 描述  */}
                  <p className="text-[#E1E1E1] text-xs sm:text-sm lg:text-start text-center">
                    {t('footer.desc')}
                  </p>
                </div>
              </div>
              <div className="flex flex-col gap-1 lg:flex-none flex-1">
                {/* 联系方式  */}
                <div style={{ color: "rgb(164,164,164)", fontFamily: dynamicFonts.font2 }} className="text-grey-default text-xs sm:text-sm font-medium leading-6">{t('footer.contact')}</div>
                <p className="text-xs sm:text-sm text-grey-light leading-6 font-medium lg:text-start text-center">
                  {t('footer.company')}
                </p>
                {/* 版本号 */}
                <p className="text-xs sm:text-sm text-grey-light leading-6 font-medium lg:text-start text-center mt-1">
                  v{frontendVersionManager.getCurrentVersion()}
                </p>
              </div>
              {/* 版权  */}
              {/* <div className="flex lg:justify-start justify-center items-center gap-2 sm:gap-4">
                <span className="text-grey-default text-xs sm:text-sm font-medium leading-6">
                  © 2025 Know1.ai. {t('footer.copyright')} -{' '}
                  <a className="underline" href="/sitemap">
                    {t('footer.sitemap')}
                  </a>
                </span>
              </div> */}
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default Footer;